import React from "react";
import Button from "./components/Button";

class App extends React.Component {
  state = { value: 1 }
  handleClick = () => {
    this.setState({ value: this.state.value + 1 })
  }
  componentDidMount() {
    this.handleClick()
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
  }
  render() {
    return (
      <div>
        <Button onClick={this.handleClick}>Hello</Button>
        <Test value={this.state.value}></Test>
        {/* <Minus></Minus> */}
      </div >
    )
  }
}

const useRef = (initialValue) => {
  const [ref] = React.useState({ current: initialValue });
  return ref
}

// const useForceUpdate = () => React.useReducer(v => v + 1, 0)[1]

function usePrevious(value) {
  const ref = useRef();

  React.useEffect(() => {
    console.log('3');
    ref.current = value;
  }, [value]);
  console.log('1');
  return ref.current;
}

function useLifeCircle() {
  const ref = useRef(0);
  const [isMount, setIsMount] = React.useState(false)
  const [isUpdate, setIsUpdate] = React.useState(false)

  React.useEffect(() => {
    //   ref.current = value;
    console.log('3');
    setIsMount(true)
  }, []);

  // React.useEffect(() => {
  //   //   ref.current = value;
  //   console.log('3-1');
  //   if (isMount) {
  //     setIsUpdate(true)
  //   }
  // }, [isMount]);

  let isInit = ref.current === 0;
  let lifeCircle = {
    isInit,
    isMount,
    isUpdate
  }
  console.log('1');

  return [
    lifeCircle
  ]
}

function useUpdate(fn) {
  const mounting = useRef(true)
  React.useEffect(() => {
    if (mounting.current) {
      mounting.current = false;
    } else {
      console.info(11111)
      fn && fn();
    }
  })
}

function Test({ value }) {
  // usePrevious(value)
  const [{ isInit, isMount, isUpdate }] = useLifeCircle()
  console.log(isInit, isMount, isUpdate);
  useUpdate()

  const [current, setValue] = React.useState(() => value);
  React.useEffect(() => {
    console.log('4');
    setValue(value)
  }, [value])
  console.log('2');
  return <div onClick={() => setValue(val => val + 1)}>{current}</div>;
}

export default App;
// const RenderCounter = () => {
//   const counter = useRef(0);    // counter.current的值可能增加不止一次 
//   counter.current = counter.current + 1;
//   return (<h1>{`The component has been re-rendered ${counter.current} times`}</h1>);
// }

// const instance = React.useRef(null)
// if (instance.current == null) {
//   instance.current = {
//     // whatever you need 
//   }
// }

// function Minus() {
//   const [minus, setMinus] = React.useState(0);
//   const ref = React.useRef({});
//   const handleClick = () => {
//     setMinus(minus + 1);
//   };
//   console.log(`ref.current=${ref.current && ref.current.innerText}`)
//   // #1 uesEffect  
//   React.useEffect(() => {
//     console.log(`denp[ref.current] >`, ref.current && ref.current.innerText);
//   }, [ref.current]);  // #2 uesEffect  
//   React.useEffect(() => {
//     console.log(`denp[minus]>`, ref.current && ref.current.innerText);
//   }, [minus]);
//   React.useEffect(() => {
//     console.log(`11`);
//   }, 1);
//   return (<div className="App">      <h1 ref={ref}>Num: {minus}</h1>      <button onClick={handleClick}>Add</button>    </div>);
// }
